import React,{Component} from 'react';
import 'swiper/dist/css/swiper.min.css';
import  Swiper from 'swiper/dist/js/swiper';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import $ from 'jquery';
import './slide.less';
import url from '../../component/posturl/BaseUrl';
const prefix = 'slide-component';
const noSwiping = classNames("swiper-slide","swiper-no-swiping",prefix+'-swiper-page');
/**
 * 用于除banner以外的轮播模块展示
 * @style {string} idName 用以给swiper容器定义id名称
 * 注意！每个Slide组件的idName属性都必须保持唯一性
 * @style {array} slideSource 轮播展示内容的数据源
 * @style {string} topic 板块名称
 * @style {number} autoplay 自由滑动时间间隔
 * @style {number} speed 滑动速度
 * @style {string} addHost 从服务器获取的轮播数据中缩略图的路径需要拼接服务器的hostname
 * @example：<Adaptive desktop={<Source/>} phone={<div>123</div>} size={1400}/>
 */
class Slide extends Component{
    startSwiper = () =>{
        let {idName,autoplay,speed,slidesPerView,spaceBetween} = this.props;
        // let idName = this.props.idName;
        // let autoplay = this.props.autoplay;
        // let speed = this.props.speed;
        // let slidesPerView = this.props.slidesPerView;
        var mySwiper = new Swiper ('#'+idName, {
            autoplay: autoplay,//可选选项，自动滑动
            speed:speed?speed:800,
            spaceBetween : spaceBetween,
            loop: true,
            slidesPerView :slidesPerView,
            slidesPerGroup:1,
            noSwiping : true,
        })
        $('.swiper-slide').mouseenter(()=>{
            mySwiper.stopAutoplay()
        });
        $('.swiper-slide').mouseleave(()=>{
            mySwiper.startAutoplay()
        })
    }
    componentDidMount(){
        this.startSwiper();
    }
    componentDidUpdate(){
       this.startSwiper();//在插入后台数据页面更新后要重新调用一次swiper
    }
    render(){
        let props = this.props;
        let Lang = props.slideSource;
        let length = Lang.length;
        let slideSource =length>0?Lang.map((value,index)=>{
            return(
                <div className={noSwiping} key={index}>
                    <a href={props.addHost?`/details?id=${value.id}&category=${value.category}`:value.id} className={prefix+"-link"}>
                        <div className={prefix+"-imgContainer"}>
                            <img src={props.addHost?`${url}/official/view?key=${value.images}`:value.images} alt=""/>
                        </div>
                        <div className={prefix+"-content"}>
                            {value.title?<h3>{value.title}</h3>:null}
                            <p>{value.summary}</p>
                        </div>
                    </a>
                </div>
            )
        }):null;
        return(
            <div className={prefix}>
                <div className={prefix+"-top"}>
                    <h3>{props.topic}</h3>
                </div>
                <div className={classNames(prefix+"-container")} id={props.idName} style={{paddingTop:"15px"}}>
                    <div className="swiper-wrapper">
                        {slideSource}
                    </div>
                </div>
            </div>
        )
    }
};
export default Slide;
Slide.propTypes = {
    idName: PropTypes.string.isRequired,
    slideSource:PropTypes.array,
    topic:PropTypes.string.isRequired,
    autoplay:PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.bool
    ]).isRequired,
    speed:PropTypes.number,
    addHost:PropTypes.oneOf([true,false]).isRequired,
    slidesPerView:PropTypes.number.isRequired,
    spaceBetween:PropTypes.number.isRequired
};